<template>
	<div :class="[opt.layoutType, 'money-main', 'row-'+opt.row]"> 
		<mt-navbar v-if="opt.row > 1 && opt.dateList[0].name" v-model="selected" :class="['tag'+opt.dateList.length, 'money-tag']">
			<mt-tab-item v-for="(item, index) in opt.dateList" class="tag-item" :id="index">{{item.name}}</mt-tab-item>
		</mt-navbar> 
		<mt-tab-container v-model="selected" class="money-con cc">		
			<mt-tab-container-item v-for="(item, index) in opt.dateList" :id="index" class="section-ge">	
				<div v-for="(listItem, index) in item.list" v-if="listItem.key != 'createTime'" :class="[{'on': listItem.quotaType === nowTitle.quotaType && isClick} , 'table-item ge-item']" @click="chooseType({name: listItem.name[item.dateType == 4 ? 1 : 0], quotaType: opt.dict[listItem.key]['quotaType']})">
					<p class="money">{{numFormat(listItem.value)}}</p>
					<p>{{opt.dict[listItem.key]['name'][item.dateType == 4 ? 1 : 0]}}</p>
				</div>
			</mt-tab-container-item>
		</mt-tab-container>	
	</div>
</template>
<script>
/**
 * @param {String} opt.orgId 数据类型
 * @param {String} opt.layoutType 数据类型
 * @param {String} opt.orgId 数据类型
 * @param {String} opt.dict, 数据类型
 */

 import {numFormat} from '@/utils/index'
 export default {
 	name: 'dy-money',
 	data () {	
 		return {
 			quotaType: 1,
 			numFormat: numFormat,
 			swipeable: true,
 			selected: '', 		
 			moneyList: [],
 			isInit : false,
 			majorPost: {
 				period: 1,
 				orgId: this.$store.getters.headerData.path
 			},		
 		}
 	},	
 	watch: {
 		selected (val, oldVal) {  			
 			let v = this.opt.dateList[val].dateType
 			this.majorPost.period = v
 			this.$store.commit("period", {name: this.opt.dateList[val].name, val: v})
 			if(this.isInit) {
 				this.saveSubmit()
 			}
 		}, 
 		orgId () { 	
 			// 有时间选择的情况
			// if (this.opt.dateList.length > 1) {
			// 	this.$store.commit("period", {name: this.opt.dateList[0].name, val: this.opt.dateList[0].dateType})
			// }
			// // nowTitle
			// this.$store.commit('nowTitle', {name: this.opt.dict[Object.keys(this.opt.dict)[0]].name[0], quotaType: this.opt.dict[Object.keys(this.opt.dict)[0]].quotaType}) 

 			if(this.selected == '') {
				this.selected = this.period == 4 ? (this.opt.dateList.length == 4 ? 3 : 2) : this.period - 1
 			} 
	 		this.saveSubmit()
 		},	
 	},
 	computed : {
 		orgId () {
 			return this.$store.getters.orgId;
 		},
 		nowTitle () {
			return this.$store.getters.nowTitle
		},	
		period () {
			return  this.$store.getters.detailCondit.condit ? this.$store.getters.detailCondit.condit.collectCondit.param.period : 1
		}		
 	},
 	props: {
 		opt: {
 			type: Object,
 			default () {
 				return {}
 			}
 		},
 		isClick: {
 			type: Boolean,
 			default () {
 				return true
 			}
 		}
 	}, 	 	
 	methods : {
 		chooseType (nowTitle) {
 			if(!this.isClick) return
 			this.quotaType = nowTitle.quotaType;
 			this.$store.commit('nowTitle', nowTitle) 			
 		},
 		saveSubmit () { 
 			if(!this.orgId) return

 			this.majorPost.orgId = this.orgId; 	
			api[this.opt.api](this.majorPost).then(data => {  
				let arr = [];					
				for(let key in this.opt.dict) { 	
					if(data[key] !== undefined) {	
						arr.push({	
							'quotaType' : this.opt.dict[key].quotaType,
							'name': this.opt.dict[key].name,
							'value': data[key],
							'key': key
						})
					}
				}				

				// 贷后
				if(this.opt.api == 'afterloanMajor') {
					this.$store.commit('afterloanMajorData', data);
				}

				// 当前数组下标-- 昨日1、本月2、历史4情况下
				let nPeriod = this.majorPost.period == 4 ? (this.opt.dateList.length == 4 ? 3 : 2) : this.majorPost.period - 1	
				this.$set(this.opt.dateList[nPeriod], 'list', arr)	

	 			this.isInit = true
			}) 		
 		}
 	},
 	destroyed () {
 		this.$store.commit("period", {name: '', val: ''})
 	}
 }
 </script>
 <style lang="less" scope>
 @import '../assets/less/base.less';
 .money-main {
 	position: relative;	 
	
	&.row-2 {
	 	.mint-tab-container-wrap {
	 		min-height: 8.05rem;
	 	}	
 	}
 	&.row-3 {
	 	.mint-tab-container-wrap {
	 		min-height: 12.1rem;
	 	}	
 	}

 	.mint-tab-container-item {
 		-ms-flex-negative: 0;
 		flex-shrink: 0;
 		width: 100%;
 	}

 	.money-con {
 		.table-item {
 			box-sizing: border-box;
 			text-align: center;
 			float: left;
 			width: 33.33%;
 			padding: .8rem 0;

 			&:nth-child(3n) {
 				border-right: none;
 			}

 			&.on {
 				background: @on-bg;
 			}

 			p {
 				font-size: .6rem;
 				line-height: 1.2rem;

 				&.money{
 					font-weight: bold;
 					color: @h1-color;
 					font-size: .7rem
 				}
 			}
 		} 
 	}

 	&.horizontal{
 		.money-tag {
 			display: -webkit-flex; 
 			display: flex;
 			box-sizing: border-box;
 			height: 1.7rem;
 			border: @border;
 			width: 100%; 	 		
 			position: relative;

 			.tag-item {
 				text-align: center;     
 				-webkit-box-align: center;
 				flex: 1;
 				height: 1.645rem;
 				line-height: 1.645rem;
 				position: relative;
 				color: @h1-color;
 				font-size: .7rem;

 				&.is-selected {
 					color: @on-color;  					

 					.mint-tab-item-label {	
 						position: relative;

	 					&:after {
	 						display: block;
	 						content: '';
	 						height: .08rem;
	 						width: 60%;
	 						position: absolute;
	 						left: 20%;
	 						bottom: -.05rem;
	 						background: @on-color;
	 					}	
 					}			
 				}
 			}
 		} 
 	}

 	&.vertical {
 		.money-tag {
 			display: block;
 			position: absolute;
 			left: 0;
 			top: 0;
 			bottom: 0;
 			margin: auto;
 			width: 1.2rem;
 			height: 4rem;
 			box-sizing: border-box;
 			border: @border;
 			z-index: 1;

 			&.tag3 {
 				height:6rem;
 			}

 			.tag-item { 
 				&:last-child{
 					border-bottom: none;
 				}				


 				border-bottom: @border;
 				color: @on-color;
 				padding: 0 0 0;
 				float: left;
 				letter-spacing:.2rem;
 				height: 2rem;
 				line-height: 1rem;
 				font-size: .6rem;
 				text-align: center;
 				word-wrap: break-word;
 				box-sizing: border-box;

 				&.is-selected {
 					background-color: #ff7327;
 					color: #fff;
 				}
 			}
 		}
		.money-con {
			overflow-x: hidden;			
 			margin-left: 1.4rem;
		}
 		.mint-tab-container-wrap {
 			overflow-x: hidden;		
 		}
 	}
 }
 </style>

